<template>
  <screen-communal active="screen-home">
    <n-grid cols="4" x-gap="12">
      <n-gi>
        <n-flex vertical>
          <div class="e-chart-pack">
            <base-pie-chart/>
          </div>
          <div class="e-chart-pack">
            <bimodal-bar-chart/>
          </div>
          <div class="e-chart-pack">
            <group-pie-chart/>
          </div>
        </n-flex>
      </n-gi>
      <n-gi span="2">
        <div class="e-chart-map">
          <p class="e-title">地图</p>
          <map-from-baidu></map-from-baidu>
        </div>
      </n-gi>
      <n-gi>
        <n-flex vertical>
          <div class="e-chart-pack">
            <base-bar-chart/>
          </div>
          <div class="e-chart-pack">
            <base-line-chart/>
          </div>
          <div class="e-chart-pack">
            <Base3DBarChart/>
          </div>
        </n-flex>
      </n-gi>
    </n-grid>
  </screen-communal>
<!--  <DvFullScreenContainer>-->
<!--    <DvBorderBox2>-->
<!--      <DvWaterLevelPond :config="config" style="width:150px;height:200px"/>-->
<!--    </DvBorderBox2>-->
<!--    <DvBorderBox1>132</DvBorderBox1>-->
<!--  </DvFullScreenContainer>-->
</template>

<script>
import {ref, inject, defineComponent} from "vue";
import {getTaskOverview} from "@/request/api/dataPro.js";
import screenCommunal from "@/components/communal/screen-communal.vue";
import MapFromBaidu from "@/components/utils/MapfromBaidu.vue";
//各个图表封装组件导入
import BaseBarChart from "@/components/echarts/BarChart/BaseBarChart.vue";
import BaseScatterPlot from "@/components/echarts/ScatterPlot/BaseScatterPlot.vue";
import Base3DBarChart from "@/components/echarts/BarChart/Base3DBarChart.vue";
import BimodalBarChart from "@/components/echarts/BarChart/BimodalBarChart.vue";
import BasePieChart from "@/components/echarts/PieChart/BasePieChart.vue";
import GroupPieChart from "@/components/echarts/PieChart/GroupPieChart.vue";
import BaseLineChart from "@/components/echarts/LineChart/BaseLineChart.vue";

export default defineComponent({
  name: "ScreenHomeView",
  components:{

    screenCommunal,MapFromBaidu,BaseBarChart,BaseScatterPlot,Base3DBarChart,BimodalBarChart,
    BasePieChart,GroupPieChart,BaseLineChart
  },
  setup(){

    return{
      config: ref({data: [66, 45],
        shape: 'roundRect'})
    }
  }
})
</script>

<style lang="scss" scoped>
.spase-pack{
  position: relative;
  top: 12%;
  border-top: 1px solid #3968a3;
  margin: 0 7%;
  padding: 1.5rem .5rem;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: #ffffff10;
  .space-cart{
    font-size: 18px;
    h3,p{
      color: #45cff1;
    }
    span{
      font-size: 36px;
      color: #f1d95c;
    }
    em{
      color: #f1d95c;
    }
  }
}

</style>